{% extends "base.html" %}

{% block content %}
<div class="container">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>用户管理</h2>
        <div class="btn-group">
            <a href="{{ url_for('export_users') }}" class="btn btn-success">导出用户</a>
            <a href="{{ url_for('download_user_template') }}" class="btn btn-outline-primary">下载导入模板</a>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#importModal">
                批量导入
            </button>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>用户名</th>
                            <th>真实姓名</th>
                            <th>部门/年级组</th>
                            <th>手机号码</th>
                            <th>注册时间</th>
                            <th>文件数量</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for user in users %}
                        <tr>
                            <td>{{ user.username }}</td>
                            <td>{{ user.real_name }}</td>
                            <td>{{ user.department }}</td>
                            <td>{{ user.phone }}</td>
                            <td>{{ user.register_time.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                            <td>{{ user.files|length }}</td>
                            <td>
                                {% if user.is_active %}
                                <span class="badge bg-success">已审核</span>
                                {% else %}
                                <span class="badge bg-warning">待审核</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if not user.is_active %}
                                <form action="{{ url_for('approve_user', user_id=user.id) }}" method="POST" style="display: inline;">
                                    <button type="submit" class="btn btn-success btn-sm">通过审核</button>
                                </form>
                                {% endif %}
                                <button type="button" class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#changePasswordModal{{ user.id }}">
                                    修改密码
                                </button>
                                <form action="{{ url_for('delete_user', user_id=user.id) }}" method="POST" style="display: inline;">
                                    <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('确定要删除此用户吗？用户的所有文件也会被删除。')">删除</button>
                                </form>
                            </td>
                        </tr>
                        <!-- 修改密码模态框 -->
                        <div class="modal fade" id="changePasswordModal{{ user.id }}" tabindex="-1">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">修改用户密码 - {{ user.real_name }} ({{ user.username }})</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>
                                    <div class="modal-body">
                                        <form action="{{ url_for('change_user_password', user_id=user.id) }}" method="POST">
                                            <div class="mb-3">
                                                <label for="new_password{{ user.id }}" class="form-label">新密码</label>
                                                <input type="password" class="form-control" id="new_password{{ user.id }}" name="new_password" required minlength="6">
                                                <div class="form-text">密码长度至少6位</div>
                                            </div>
                                            <div class="mb-3">
                                                <label for="confirm_password{{ user.id }}" class="form-label">确认新密码</label>
                                                <input type="password" class="form-control" id="confirm_password{{ user.id }}" name="confirm_password" required minlength="6">
                                            </div>
                                            <button type="submit" class="btn btn-primary">保存</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- 导入模态框 -->
<div class="modal fade" id="importModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">批量导入用户</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ url_for('import_users') }}" method="POST" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">选择Excel文件</label>
                        <input type="file" class="form-control" name="file" accept=".xlsx" required>
                    </div>
                    <div class="alert alert-info">
                        <strong>提示：</strong>
                        <ul class="mb-0">
                            <li>请使用正确的导入模板</li>
                            <li>Excel文件中的所有字段都必须填写</li>
                            <li>用户名不能重复</li>
                            <li>密码长度至少6位</li>
                        </ul>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">开始导入</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

<!-- 添加密码验证的JavaScript -->
<script>
    {% for user in users %}
    document.getElementById('confirm_password{{ user.id }}').addEventListener('input', function() {
        var password = document.getElementById('new_password{{ user.id }}').value;
        var confirm = this.value;
        if (password !== confirm) {
            this.setCustomValidity('两次输入的密码不一致');
        } else {
            this.setCustomValidity('');
        }
    });

    document.getElementById('new_password{{ user.id }}').addEventListener('input', function() {
        if (this.value.length < 6) {
            this.setCustomValidity('密码长度至少6位');
        } else {
            this.setCustomValidity('');
            var confirm = document.getElementById('confirm_password{{ user.id }}');
            if (confirm.value) {
                if (this.value !== confirm.value) {
                    confirm.setCustomValidity('两次输入的密码不一致');
                } else {
                    confirm.setCustomValidity('');
                }
            }
        }
    });
    {% endfor %}
</script> 